<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
    <center>
    <h4>
	User 
	&nbsp;/&nbsp;
        <a href="/">Home</a>
    </h4>
    <br>
    <div class="row">
        <div class="col-md-2">
        </div>
        <div class="col-md-8">
            <table class="table table-responsive">
                <tr>
                    <td>Name</td>
                    <td>Email</td>
                    <td></td>
                </tr>
        
                <tr>
                    <td><input type="text" id="username"></td>
                    <td><input type="text" id="email"></td>
                    <td><button class="btn btn-success pull-right" id="add_user">Add</button></td>
                </tr>

                {% for user in users %}
                <tr>
                    <td>{{ user.username }}</td>
                    <td>{{ user.email }}</td>
                    <td>
                        <a class="pull-right" href="/api/user_delete?id={{ user.id }}">Delete</a>
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
        <div class="col-md-2">
        </div>
    </div>
    </center>

    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function(){
            $("#add_user").click(function(){

                $.post("api/add_user", 
                    {
                        username: $("#username").val(),
                        email: $("#email").val()
                    },
                    function(data, status) {
                        // console.log("data: " + data);
                        //alert(data);
                        location.href="/user";

                    }
                );

            });
        });
    </script>
  </body>
</html>
